<template>
  <el-container class="wrapper">
    <el-scrollbar
      class="container-left"
      wrap-class="container-left-wrap"
      :class="{'slide-hide': isCollapse, 'slide-in-left': menuShow}"
    >
      <div class="logo">
        <!--图片logo-->
        <img alt="element-logo" style="width: 200px;height: 55px;" src="/static/img/logo-s.jpg">
        <!--文字logo-->
        <span>后台</span>
      </div>
      <el-menu
        class="menu"
        :default-active="onRoutes"
        :collapse="isCollapse"
        style="border: none;"
        unique-opened
        router
      >
        <sidebar-item v-for="item in routers" :key="item.path" :item="item"></sidebar-item>
      </el-menu>
    </el-scrollbar>
    <el-container
      class="container-box"
      v-bind:class="{'slide-hide': isCollapse, 'slide-in-left': menuShow}"
    >
      <el-header class="header">
        <div class="header-left">
          <div class="header-toggle" @click="menuShow = !menuShow; showSideBar()">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div
            class="slide-toggle"
            :class="{'slide-toggle-open': isCollapse}"
            @click="toggleSideBar"
          >
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="header-tabs-box">
          <el-breadcrumb class="app-levelbar" separator="/">
            <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
              <span
                v-if="item.redirect==='noredirect'||index==levelList.length-1"
                class="no-redirect"
              >{{item.name}}</span>
              <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="badge">
          <i
            class="el-icon-message-solid"
            style="color: #000;font-size: 25px;cursor: pointer;"
            @click="$refs.badage.isshowdia = true"
          ></i>
          <el-badge :value="badagecount" :max="10"></el-badge>
        </div>
        <screenfull class="screenfull"></screenfull>

        <div class="header-right">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link userinfo-inner">
              <img src="/static/img/touxiang.jpg">
            </span>
            <!--<i class="el-icon-setting" style="margin-right: 15px"></i>-->
            <!--<span>{{username}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="handlePassword">修改密码</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="loginOut">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!--新增界面-->
        <el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="85%" top="5vh">
          <el-form :model="passwordFormData" :rules="passwordFormDataRules" ref="passwordFormData">
            <el-form-item label="原始密码" prop="old_password">
              <el-input type="password" v-model="passwordFormData.old_password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new_password">
              <el-input type="password" v-model="passwordFormData.new_password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="check_new_password">
              <el-input
                type="password"
                v-model="passwordFormData.check_new_password"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="passwordFormVisible = !passwordFormVisible">取消</el-button>
            <el-button
              type="primary"
              @click.native="addSubmit('passwordFormData')"
              :loading="passwordLoading"
            >提交</el-button>
          </div>
        </el-dialog>
      </el-header>

      <!--遮板-->
      <div class="main-mask" v-show="menuShow" @click="menuShow = !menuShow"></div>
      <el-main class="main">
        <transition name="move" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-main>
      <el-footer class="page-footer">2019 &copy; 源代码智能科技有限公司版权所有</el-footer>
    </el-container>
    <badage ref="badage"/>
  </el-container>
</template>


<script>
import Screenfull from "components/common/Screenfull";
import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem.vue";
import userService from "services/userService";
import badage from "../common/home/badage";

export default {
  components: {
    SidebarItem,
    Screenfull,
    badage,
  },
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.passwordFormData.check_new_password !== "") {
          this.$refs.passwordFormData.validateField("check_new_password");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwordFormData.new_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      badagecount: 0,
      menuShow: false,
      levelList: null,
      passwordLoading: false,
      passwordFormVisible: false,
      passwordFormData: {
        old_password: "",
        new_password: "",
        check_new_password: ""
      },
      passwordFormDataRules: {
        old_password: [
          {
            required: true,
            message: "请输入原始密码",
            trigger: "blur"
          }
        ],
        new_password: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          },
          { validator: validatePass, trigger: "blur" }
        ],
        check_new_password: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur"
          },
          { validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters({
      routers: "routers"
    }),
    onRoutes() {
      return this.$route.path;
    },
    username() {
      let username = this.$store.state.admin.userName;
      return !username ? this.name : username;
    },
    isCollapse() {
      return this.$store.state.app.sidebar.opened;
    }
  },
  mounted() {
    // console.log(routers);
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("ToggleSideBar");
    },
    showSideBar() {
      this.$store.dispatch("ShowSideBar");
    },
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      const first = matched[0];
      if (first && (first.name !== "首页" || first.path !== "")) {
        matched = [{ name: "首页", path: "/" }].concat(matched);
      }
      this.levelList = matched;
    },
    loginOut() {
      let _this = this;
      this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.$store.dispatch("loginOut").then(() => {
          //     location.reload(); // 为了重新实例化vue-router对象 避免bug
          // });
          // userService.logout({logout: this.$store.getters.token}).then(res => {
          sessionStorage.removeItem("oauth");
          _this.$store.dispatch("loginOut");
          // this.$store.dispatch('loginName', {access_token: ''})
          _this.$router.push("/login");

          // })
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "操作失败"
          });
        });
    },
    // 显示修改密码界面
    handlePassword() {
      this.passwordFormVisible = true;
      this.passwordFormData = {
        old_password: "",
        new_password: "",
        check_new_password: ""
      };
    },
    addSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.passwordLoading = true;
          let data = Object.assign({}, this.passwordFormData);
          data.adminId = getAdminId();
          password(data)
            .then(res => {
              this.passwordLoading = false;
              if (res.code) {
                this.$message({
                  message: res.message,
                  type: "error"
                });
              } else {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                // 刷新表单
                this.$refs["passwordFormData"].resetFields();
                this.passwordFormVisible = false;
                this.$store.dispatch("loginOut").then(() => {
                  location.reload(); // 为了重新实例化vue-router对象 避免bug
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败"
              });
            });
        }
      });
    }
  },
  created() {
    this.getBreadcrumb();
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  }
};
</script>


<style type="text/scss" lang="scss">
@import "../../styles/mixin";

.el-dropdown-menu__item span {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.sizesel {
  display: inline-block;
  height: $header-height;
  position: absolute;
  right: 250px;
  top: 5px;
}

.page-footer {
  text-align: center;
  color: #000;
  height: 25px !important;
  line-height: 25px;
}

.badge {
  display: inline-block;
  height: $header-height;
  position: absolute;
  right: 200px;
  top: 18px;
}

.screenfull {
  display: inline-block;
  height: $header-height;
  position: absolute;
  right: 150px;
  // top: 20px;

  //     .header-left {
  //     display: inline-block;
  //     height: $header-height;
  //     overflow: hidden;
  // }
}

.el-header {
  /*background-color: #fff;*/
  color: #333;
  padding: 0 10px;
}

.el-aside {
  color: #333;
}

.el-main {
  position: relative;
  padding: 0 10px 10px;
  background-color: #fff;
  margin-left: 7px;
  margin-top: 5px;
}

.main-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  z-index: 100;
  background-color: #000;
  opacity: 0.3;
}

.move-enter,
.move-leave {
  opacity: 0;
}

.wrapper {
  height: 100%;
  overflow-y: hidden;
  background-color: #f5f7f9;
}

.container-box {
  height: 100%;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  overflow-y: auto;
}

.container-left {
  background-color: #ffffff;
  transition: left 0.23s ease-in-out;
  height: 100%;
}

.container-left-wrap {
  overflow-x: hidden !important;
}

.container-left .svg-icon {
  font-size: 20px;
  margin-right: 5px;
}

.container-left:not(.slide-hide) {
  width: 200px;
}

.container-left.slide-hide {
  .logo img {
    display: none;
    // width: 200px;
  }
  .logo span {
    display: inline-block;
    // width: 70px;
  }
}

.menu {
  width: 100% !important;
  background-color: #ffffff;
}

/*.menu::-webkit-scrollbar{*/
/*display: none;*/
/*}*/

.header {
  position: relative;
  text-align: left;
  font-size: 12px;
  /*<!--line-height: $header-height;-->*/
  border-bottom: 3px solid #c0c1e1;
  background-color: #fff;
}

.header .el-dropdown {
  @include fxied-center;
}

.logo {
  display: block;
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #333333;
  background-color: #f5f7f9;
  /*border-bottom: 3px solid #c0c1e1;*/
  box-sizing: border-box;
  transition: display 0.7s ease-in-out;
  img {
    vertical-align: middle;
  }
  span {
    display: none;
  }
}

.header-left {
  display: inline-block;
  height: $header-height;
  overflow: hidden;
}

.header-tabs-box {
  display: inline-block;
  height: $header-height;
  max-width: 60%;
  overflow: hidden;
}

.header-concent {
  display: inline-block;
  height: $header-height;
  overflow: hidden;
  margin-left: 30px;
  img {
    width: 35px;
    height: 35px;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
  }
}

.userinfo-inner {
  cursor: pointer;
  color: black;
  img {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    margin: 5px 0px 5px 10px;
    float: right;
  }
}

.header-right {
  position: absolute;
  top: 0;
  right: 50px;
  display: flex;
  width: 80px;
  height: 100%;
  margin-left: 10px;
  .el-dropdown {
    display: flex;
    cursor: pointer;
  }
  span {
    display: inline-block;
    @include text-overflow;
  }
  i {
    line-height: $header-height;
    margin-top: 2px;
  }
}

.app-levelbar {
  margin-left: 20px;
  line-height: 57px !important;
}

/*宽屏时出现*/
.slide-toggle {
  display: inline-block;
  height: $header-height;
  line-height: $header-height;
  text-align: center;
  cursor: pointer;
}

.slide-toggle span {
  display: inline-block;
  width: 2px;
  height: 12px;
  background-color: rgba(135, 141, 153, 0.8);
  margin-left: 5px;
}

.slide-toggle-open span {
  display: block;
  margin-left: 4px;
  margin-top: 4px;
  width: 16px;
  height: 2px;
}

.slide-toggle-open {
  padding-top: 17px;
}

@media screen and (min-width: 768px) {
  .main-mask {
    display: none;
  }
}

/*.slide-hide {*/
/*width: 64px !important;*/
/*}*/

@media screen and (max-width: 768px) {
  .slide-hide.slide-in-left {
    -webkit-transform: translate3d(64px, 0, 0) !important;
    transform: translate3d(64px, 0, 0) !important;
  }
  .container-left.slide-hide.slide-in-left {
    left: -64px;
    width: 64px;
  }
  .container-left.slide-in-left {
    left: 0;
  }
  .container-left {
    margin-right: 0;
    opacity: 1;
    position: absolute !important;
    top: 0;
    left: -225px;
    z-index: 10;
    padding: 0;
  }

  .container-box.slide-in-left {
    min-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(187px, 0, 0);
    transform: translate3d(187px, 0, 0);
    overflow: initial;
  }
  .header-toggle {
    display: block;
    /*background-color: #26a2ff;*/
    border-radius: 4px;
    /*border: 1px solid #fff;*/
    height: 40px;
    margin: 10px 0;
    padding: 2px 6px;
    outline: none;
    width: 40px;
    z-index: 10;
  }

  .header-toggle span {
    display: block;
    width: 100%;
    height: 4px;
    margin: 5px auto;
    background-color: rgba(135, 141, 153, 0.8);
  }

  .logo {
    display: none;
  }
  .slide-toggle {
    display: none;
  }
}

.el-dropdown-menu__item {
  padding: 0 !important;
}
</style>
